<template>
  <div class="searchPage">

    <!-- 顶部导航及搜索输入框 -->
    <div class="top">
      <div class="left" @click="back">
        <img src="../assets/back.svg">
      </div>
      <div class="center">
        <input type="text" :placeholder="defaultWord" v-model="curValue">
      </div>
      <div class="right">
        <span @click="search">搜索</span>
      </div>
    </div>

    <my-scroll class="container">
    <div class="box">

    <!-- 热搜5位 -->
    <div class="hotSearch">
      <div class="hotList">
        <div
          v-for="(item, index) of hotSearchList"
          :key="index"
          @click="selectHotWord(item.first)"
          class="item">
          <span class="context">{{item.first}}</span>
        </div>

      </div>
    </div>

    <!-- 搜索结果列表 -->
    <div class="searchResult">
      <div class="resList">
        <div
        v-for="(item, index) of resultList"
        :key="index"
        @click="selectSong(item.id, item.name, item.album.artist.img1v1Url, item.artists, index)"
        class="item">
        <div class="detail">
          <span class="songName">{{item.name}}</span>
          <span class="singers">{{getSingers(item.artists)}}</span>
        </div>
        </div>
      </div>
        
    </div>

    </div>
    </my-scroll>

  </div>
</template>

<script>
  import MyScroll from "../components/MyScroll";
  export default {
    name: "SearchPage",
    components: {
      MyScroll
    },
    data() {
      return {
        defaultWord: '',
        curValue: '',
        hotSearchList: [],
        resultList: []
      }
    },
    computed: {
      getSingers: function () {
        return function(singers){
          let arr = singers.map((item) => {
            return item.name;
          });
          return  arr.join(' & ');
        };
      }
    },
    methods: {
      back(){
        this.$router.go(-1);
      },
      getHotSearch(){
        this.$axios.get('/api/search/hot')
        .then(res => {
          // console.log(res);
          this.defaultWord = res.data.result.hots[0].first;
          this.hotSearchList = res.data.result.hots;
        })
        .catch(err => console.log(err));
      },
      selectHotWord(word){
        // console.log(word);
        this.curValue = word;
      },
      search(){
        // console.log(this.defaultWord+'|'+this.curValue);
        let word = '';
        if(this.curValue.replace(/\s+/g,"") == '' && this.curValue.length === 0){
          if(this.defaultWord.replace(/\s+/g,"") != ''){
            word = this.defaultWord;
          }else{
            console.log("未输入任何内容！");
            return;
          }
        }
        else if(this.curValue.replace(/\s+/g,"") == '' && this.curValue.length > 0){
          console.log("不能输入全是空格！");
          return;
        }
        else{
          console.log("搜索默认关键词");
          word = this.curValue;
        }
        this.$axios.get(`/api/search?keywords=${word}`)
        .then(res => {
          console.log(res);
          this.resultList = res.data.result.songs;
        })
        .catch(err => {console.log(err)});
      },
      selectSong(id, name, img, singers, index){
        this.$store.dispatch("setSong", null);  //先清空当前播放的音乐
        this.$store.dispatch("setIsInCurrList", false); //正在播放的歌曲不是在当前播放列表里的
        this.getSongUrl(id, name, img, singers, index);
      },
      getSongUrl(id, name, img, singers, index){
        let url = '';
        this.$axios.get(`/api/song/url?id=${id}`)
          .then(res => {
            url = res.data.data[0].url;
            this.setSong(id, url, name, img, singers, index);
          })
          .catch(err => console.log(err));
      },
      setSong(id, url, name, img, singers, index){
        let song = {};
        song.id = id;
        song.url = url;
        song.imgUrl = img;
        song.name = name;
        song.singers = singers;
        song.index = index;
        this.$store.dispatch("setSong", song);
        this.$store.dispatch("setMiniPlayerVisible", true);
      }

    },
    activated(){
      this.curValue = '';
      this.defaultWord = '';
      this.getHotSearch();
    }
  }
</script>

<style scoped lang="scss">
.searchPage{
  width: 100%;
  height: 100vh;
  color: #ffffff;
  background: $dark-background;
  position: absolute;
  top: 0;
  left: 0;

  .top{
    width: 100%;
    height: 50px;
    background: $dark-background;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    .left{
      width: 15vw;
      height: 50px;
      margin-left: 10px;
      display: flex;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      img{
        width: 20px;
        height: 20px;
      }
    }
    .center{
      width: 70vw;
      height: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid $dark-color2;
      border-radius: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      input{
        color: white;
        font-size: 0.3rem;
        width: 90%;
        height: 90%;
        border: none;
        outline: none;
        background: none;
      }
    }
    .right{
      width: 15vw;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0px;
      position: absolute;
      top: 0;
      right: 0;
      span{
        font-size: 0.32rem;
      }
    }
  }

  .container{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    .box{
      padding-top: 50px;
      padding-bottom: 100px;
    }
    .hotSearch{
      width: 100vw;
      height: auto;
      .hotList{
        width: 95vw;
        height: auto;
        margin: 0 auto;
        display: flex;
        flex-flow: row wrap;
        .item{
          margin-right: 10px;
          margin-bottom: 10px;
          max-width: 90vw;
          height: 30px;
          padding: 0 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba($color: #ffffff, $alpha: 0.1);
          border-radius: 15px;
          overflow: hidden;
          .context{
            font-size: 0.3rem;
          }
        }
      }
    }

    .searchResult{
      width: 100%;
      .resList{
        margin: 0 auto;
        width: 90vw;
        .item{
          width: 100%;
          height: 60px;
          display: flex;
          align-items: center;
          .detail{
            max-width: 88vw;
            height: 40px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .songName{
              max-width: 88vw;
              font-size: 0.3rem;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            .singers{
              max-width: 88vw;
              font-size: 0.2rem;
              color: #29a19c;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }

        }
      }
    }

  }






}

</style>